<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
<%--常量--%>
<%@ include file="/common/constHead.jsp"%>
<%--jQuery--%>
<%@ include file="/common/jqueryHead.jsp"%>
<%--jo--%>
<%@ include file="/common/joHead.jsp"%>
<%--bootstrap和字体--%>
<%@ include file="/common/bootstrapHead.jsp"%>
<%--layer--%>
<%@ include file="/common/layerHead.jsp"%>
<%--公共--%>
<%@ include file="/common/commonHead.jsp"%>
<%--日期选择--%>
<%@ include file="/common/dateHead.jsp"%>
<%--上传文件--%>
<%@ include file="/common/uploadHead.jsp"%>
<%-- 导入导出--%>
<%@ include file="/common/uploadHead2.jsp"%>
<title>自然保护地实例表单</title>
<link rel="stylesheet"
	href="<%=URL_STATIC%>static/css/map/mapToolbar.css">
<script src="static/js/map/lib/ol-debug.js"></script>
<script src="static/js/map/lib/featureEdit.js"></script>
<script src="static/js/map/lib/mapEvent.js"></script>
<script src="static/js/map/lib/mapFactory.js"></script>
<script src="static/js/map/lib/mapStyle.js"></script>

<script src="static/js/map/lib/mapTool.js"></script>
<script src="static/js/map/lib/mapUtil.js"></script>
<script type="text/javascript">
            $(function(){
                var jParams = {
                    "PKName" : "id",//主键属性名
                    "saveAfter" : "toEdit",
                    "addUrl" : "travel/reserve/insert.action",//新增
                    "deleteUrl" : "travel/reserve/delete.action",//删除
                    "updateUrl" : "travel/reserve/update.action",//修改
                    "formDataUrl" : "travel/reserve/get.action",//查询
					"saveAgainUrl":"travel/reserve/saveAgain.action"
                };
                joForm.initFormPage(jParams);//初始化
				if(joForm.formData.state==2){
					$("#li1,#li2,#li3").css('display','');
					//$("#li1,#li2,#cyinfo").css('display','');
				}
				if(joForm.formData.state==3){
					$("#a_row").css('display','');
				}
				loadReserveCheckInfo();//加载审批原因
                loadImg();//加载照片
                loadFile();//加载相关文件
                getSpatialLocationData();//加载空间位置信息(功能分区)
            });
            var flag = top.flag;
            //初始化表单值前处理
            joForm.initFormValueBefore = function(oJson){
                oJson.buildDate = jo.formatDate(oJson.buildDate);
            };
            //获取保护地空间位置信息数据回显到表单
			function getSpatialLocationData() {
			    //清空table
                top.positionTable.html("");
			    jo.postAjax("travel/natureReserveSpatialinfo/getListByReserveId.action",{"reserveId":joForm.params.id},function (json) {
					if(json && json.code == 0){//后台执行成功

					    if(json.data && json.data.length > 0){//查询出有保护地对应功能区的空间位置信息数据
					        var data = json.data;
							for(var i = 0; i < data.length; i++){
					            var funType = data[i].type;
					            var position = data[i].position;
					            var id = data[i].id;
					            //拼接要回显的功能分区位置坐标信息
								var _html = '<tr>' + '<td width="15%" class="active" align="" style="display: none;">'+id+'</td>' +
                                '<td id="funName'+i+'" width="15%" class="active" align="">'+funType+'</td>' +
                                '<td class="tnt" colspan="3"><input type="text"' +
                                'name="" id="funCoordinate'+i+'" class="form-control input-sm"' +
                                'placeholder="暂无该分区,请填充数据" value="'+position+'"/></td>'+
                                '</tr>';
                                top.positionTable.append(_html);
							}
						}
					}
                });
            }
            //新增成功回调
            joForm.saveSuccessAfter = function(result){
                top.jo.showMsg("创建成功!");//提示信息
				if(flag != 1){
                    top.main.joView.reloadCurrentPage();//重新加载父页面数据
				}
                jo.closeSelf('WIN_ADD');//关闭自己
            };
            //删除成功回调
            joForm.delSuccessAfter = function(){
                top.jo.showMsg("修改成功!");//提示信息
                top.main.joView.reloadCurrentPage();//重新加载父页面数据
                jo.closeSelf('WIN_EDIT');//关闭自己
            };
            //修改成功回调
            joForm.updateSuccessAfter = function(){
                top.jo.showMsg("修改成功!");//提示信息

				if(flag !=1){
                    top.main.joView.reloadCurrentPage();//重新加载父页面数据
				}

                jo.closeSelf('WIN_EDIT');//关闭自己
                //window.location.reload();//刷新当前页面
            };
			//加载产业详情
			function loadcyinfo(){
				top.jo.showWin('page/nature/reserveCountList.jsp?reserveId=' + joForm.params.id, '50%', '60%', '产业详情', 'WIN_POINT_DOC');
				//$("#info").load("page/nature/reserveCountList.jsp",{"reserveId":joForm.params.id});
			};
			//审批不通过后再次上报
			function saveAgain(){
				joForm.saveAgain();
			}
			//修改
			function update(){
				jo.confirm("确定已经做出了修改?",function(){
					joForm.update();
				})
			}
			//加载审批不通过原因及审批时间等
			function loadReserveCheckInfo(){
				if(joForm.params.PKValue){
					jo.postAjax("travel/natureReserveCheck/get", {id:joForm.formData.id}, function(json){
						if(json && json.code == "0" && json.data && json.data.length > 0){
							var info = json.data[0];
							$(".span_val1").each(function(idx, ele){
								if(ele.id.substring(2)=="checkTime"){
									var time = jo.formatDate(info[ele.id.substring(2)]);
									$(ele).text(jo.getDefVal(time, ''));
								}else{
									$(ele).text(jo.getDefVal(info[ele.id.substring(2)], ''));
								}
							});
						}
					}, true);
				}
			}
            var src11 = null;
            //加载旅游资源对应图片
            function loadImg(){
                if(!joForm.isAdd && joForm.params.PKValue){//仅修改表单需要
                    jo.postAjax("travel/travelFile/getTravelFileBySourceIdAndType.action", {"sourceId":joForm.params.PKValue, "stype":"1"}, function(json){
                        if(json && json.code == 0){
                            if(json.data && json.data.length > 0){//存在图片信息
                                var _html = '';
                                for(var i=0;i<json.data.length;i++){
                                    var item = json.data[i];
                                    _html += getImgHtml(item);
                                }
                                src11 = _html;
                                $("#ul_img").html(_html);
                            }
                        }
                    }, true);
                }else{
                    $("#img").html("请先保存基本信息后再上传照片!");
                }
            }
            //根据图片信息生成用于图片展示的html代码
            function getImgHtml(img){
                //记录图片映射关系
                idxMap[img.id] = imgArr.push({
                            "id" : img.id,//标识图片,删除时重新计算索引需要用到
                            "alt": img.fileInfo.name,
                            "pid": img.fileId, //图片id
                            "src": "fs/file/image.action?id="+img.fileId, //原图地址
                            "thumb": "fs/file/image.action?id="+img.fileId //缩略图地址
                        }) - 1;
                return '<li id="li_img_'+img.id+'"><img onclick="photoShow(\''+img.id+'\')" src="fs/file/image.action?id='+img.fileId+'" alt="'+img.fileInfo.name+'" title="'+img.fileInfo.name+'"/>' +
                        '<div class="img_close" onclick="delImg(\''+img.id+'\')"><i class="fa fa-close" aria-hidden="true"></i></div></li>';
            }
            //删除图片
            function delImg(id){
                if(id){
                    jo.showLoading();
                    jo.postAjax("travel/travelFile/delete", {"id":id}, function(json){
                        if(json && json.code == 0){
                            //移除对应li
                            $("#li_img_"+id).remove();
                            //整理imgArr和idxMap
                            imgArr.splice(idxMap[id], idxMap[id]);//删除原先位置的被删除图片
                            //重新建立索引关系
                            for(var i=0;i<imgArr.length;i++){
                                idxMap[imgArr[i].id] = i;
                            }
                            jo.showMsg("删除成功!", {icon:1});
                        }
                        jo.showLoading(false);
                    }, true);
                }
            }
            var imgArr = [];//图片信息数组,用于幻灯片
            var idxMap = {};//图片id在imgArr中的位置映射
            //照片幻灯片展示
            function photoShow(imgId){
                var json = {
                    "title": "相册", //相册标题
                    "id": 123, //相册id
                    "start": idxMap[imgId], //初始显示的图片序号，默认0
                    "data": imgArr
                };
                layer.photos({
                    photos: json
                    ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                });
            }
            //上传照片
            var UPLOAD_FILE_TYPES = "jpg,png";//上传图片格式要求
            function upload(){
                if(joForm.params.PKValue){
                    jo.uploadFile("travel/travelFile/uploadImg?sourceId=" + joForm.params.PKValue, function(success, file, json){
                        if(success && json){
                            jo.closeUploadDialog();//关闭上传窗口
                            if(json.code == "0" && json.data[0]){
                                $("#ul_img").append(getImgHtml(json.data[0]));
                                jo.showMsg("上传成功", {icon:1});
                            }else{
                                jo.showMsg(json.info);
                            }
                        }
                    });
                }
            }
			//上传文件
			function uploadNatureFile(type){
				if(joForm.params.PKValue && type){//编辑时允许上传
					jo.uploadFile("travel/travelFile/uploadFile?sourceId=" + joForm.params.PKValue + "&stype=" + type, function(success, file, json){
						if(success && json){
							jo.closeUploadDialog();//关闭上传窗口
							if(json.code == "0" && json.data[0]){
								//$("#ul_img").append(getImgHtml(json.data[0]));
								jo.showMsg("上传成功", {icon:1});
								loadFile();
							}else{
								jo.showMsg(json.info);
							}
						}
					});
				}
			}
			//加载文件
			function loadFile(){
				if(!joForm.isAdd && joForm.params.PKValue){//仅修改表单需要
					//计划规划文件
					jo.postAjax("travel/travelFile/getTravelFileBySourceIdAndType.action", {"sourceId":joForm.params.PKValue, "stype":"plan"}, function(json){
						if(json && json.code == 0){
							if(json.data && json.data.length > 0){//存在图片信息
								var _html = '';
								for(var i=0;i<json.data.length;i++){
									var item = json.data[i];
									if(item.fileInfo){
										_html += '<p style="margin-bottom: 5px;" id="f_'+item.id+'">' +
												(i+1)+'、<a class="cursor-hand" onclick="downloadFile(\''+item.fileInfo.id+'\')" title="单击下载此文件">'+item.fileInfo.name+'</a>' +
												'&nbsp;&nbsp;|&nbsp;&nbsp;(<a class="cursor-hand" onclick="delFile(\''+item.id+'\')">删除</a>)' +
												'</p>';
									}

								}
								$("#plan").html(_html);
							}
						}
					}, true);

					//管理制度文件
					jo.postAjax("travel/travelFile/getTravelFileBySourceIdAndType.action", {"sourceId":joForm.params.PKValue, "stype":"system"}, function(json){
						if(json && json.code == 0){
							if(json.data && json.data.length > 0){//存在图片信息
								var _html = '';
								for(var i=0;i<json.data.length;i++){
									var item = json.data[i];
									if(item.fileInfo){
										_html += '<p style="margin-bottom: 5px;" id="f_'+item.id+'">' +
												(i+1)+'、<a class="cursor-hand" onclick="downloadFile(\''+item.fileInfo.id+'\')" title="单击下载此文件">'+item.fileInfo.name+'</a>' +
												'&nbsp;&nbsp;|&nbsp;&nbsp;(<a class="cursor-hand" onclick="delFile(\''+item.id+'\')">删除</a>)' +
												'</p>';
									}
								}
								$("#system").html(_html);
							}
						}
					}, true);
				}else{
					$("#plan").html("请先保存基本信息后再上传!");
					$("#system").html("请先保存基本信息后再上传!");
				}
			}
			//删除文件
			function delFile(id){
				if(id){
					jo.showLoading();
					jo.postAjax("travel/travelFile/delete", {"id":id}, function(json){
						if(json && json.code == 0){
							jo.showMsg("删除成功!", {icon:1});
							$("#f_"+id).remove();
						}
						jo.showLoading(false);
					}, true);
				}
			}
			//加载地图
	        $(function(){
				mapUtil.initializeMap();
                map.getView().setZoom(8);
                var tab=document.getElementById("positionTal");
                var rows=tab.rows;
                //定义存储功能区及坐标的数组
                var funInfoArr = [];
                for(var i=0;i<rows.length;i++){ //遍历表格的行
                    //定义json
                    var funInfoJson = {};
                    //获取坐标信息
                    var funCoordinate = $("#"+"funCoordinate"+i).val();
                    //获取功能区类型
                    var funName = $("#"+"funName"+i).text();
                    funInfoJson.funName = funName;
                    funInfoJson.funCoordinate = funCoordinate;
                    funInfoArr.push(funInfoJson);
                }
                console.info(funInfoArr);
                for(var j = 0; j < funInfoArr.length; j++){
                    var funCoordinate = funInfoArr[j].funCoordinate;
                    var funName = funInfoArr[j].funName;
                    //保护区名称
                    var reserveName = funName.substring(0,3);
                    if(funCoordinate != ""){
                        var funCoordinateJson = JSON.parse(funCoordinate);
                        var str = funCoordinate.split(",");
                        var str1 = str[0].replace('[','').replace('[','').replace('[','');
                        var str2 = str[1].replace(']','');
                        map.getView().setCenter([parseFloat(str1), parseFloat(str2)]);
                        var bhdlayer = mapUtil.addGeojsonLayer(reserveName, null);
                        var style = null;
                        if(funName == "实验区地理坐标"){
                            style = new ol.style.Style({fill: new ol.style.Fill({color: 'rgba(0, 206, 209, 0.8)'})});//淡蓝色
                        }else if(funName == "缓冲区地理坐标"){
                            style = new ol.style.Style({fill: new ol.style.Fill({color: 'rgba(211, 211, 211, 0.8)'})});//灰色
                        }else if(funName == "核心区地理坐标"){
                            style = new ol.style.Style({fill: new ol.style.Fill({color: 'rgba(255, 0, 0, 0.8)'})});//红色
                        }else{
                            style = new ol.style.Style({fill: new ol.style.Fill({color: 'rgba(0, 255, 0, 0.8)'})});//绿色
                        }
                        var featrue = addFeature(bhdlayer, 1, funCoordinateJson, "Poly", reserveName, style);
                    }
                }
                //获取自然保护地坐标
                var natureReservePos = $("#natureCoordinate").val();
                if(natureReservePos != ""){
                    var natureReservePosJson = JSON.parse(natureReservePos);
                    var str = natureReservePos.split(",");
                    var str1 = str[0].replace('[','').replace('[','').replace('[','');
                    var str2 = str[1].replace(']','');
                    map.getView().setCenter([parseFloat(str1), parseFloat(str2)]);
                    var vetoryLayer = mapUtil.addGeojsonLayer("国家级保护区", null);
                    //添加feature,保护区对象
                    var reserveName = $("#reserveName").val();
                    var style = new ol.style.Style({fill: new ol.style.Fill({color: 'rgba(205, 155, 29, 0.8)'})});//棕色
                    var featrue = addFeature(vetoryLayer, 1, natureReservePosJson, "Poly", reserveName, style);
                }
				///添加地图选择事件
			 	/// createOverlayContent 回调函数，生成overlay 内容
			 	var popup = olGis.addPopOverlay("popup123");
				registerPointerMoveEvent('保护区名称');
				drawGeom.setEditLayer(vetoryLayer);
				mapUtil.createSelectSingleClick(createOverlayContent);
			});
			//创建弹窗
	        function createOverlayContent(feature) {
                $("#popup").css("display","");
	        	feature.get('id');
	        	var bhname = $("#reserveName").val();
	        	var area = $("#area").val();
				if(src11 != null){
					var src1 = src11.split(" ");
					var src = src1[3];//src="fs/file/image.action?id=ded54c22642840cba912e5c3d61183bb"  
	        		var popcontent = ' <h4 style="color:red">'+bhname+'</h4><h5>保护区面积:'+area+'k㎡</h5><img border="2"'+src+'alt="Pulpit rock" width="300" height="150">';
	        		return popcontent;
				}else{
	        		var popcontent = ' <h4 style="color:red">'+bhname+'</h4><h5>保护区面积:'+area+'k㎡</h5><h3>暂无图片</h3>';
	        		return popcontent;
					
				}
				
	        }
            //导入
            var EXCEL_DOWNLOAD_URL = "static/template/reserve-fun-pos.xls";//模板下载地址
            var UPLOAD_FILE_TYPES = "xls,xlsx";//上传文件限制
            function importExcel(){
                uploadFile1("travel/natureReserveSpatialinfo/import.action", function(success, file, result){
                    if(result && result.code == "0"){
                        jo.showMsg(jo.getDefVal(result.info, "导入成功!"));
                        jo.closeUploadDialog();
                        //将导入的信息回显到页面展示
                        getSpatialLocationData();
                        //joView.reloadCurrentPage();
                    }else if(result && result.code == "-1"){
                        jo.showMsg(result.info);
                    }else{
                        jo.showMsg("导入失败!");
                    }
                });
            }
            //导出
            function exportExcel(){
                //循环所有行获取列
                var idStr = "";
                $("#positionTal tr").each(function(){
                    var textId = $(this).children("td:first").text();
                    idStr = idStr + textId + ",";
                });
                idStr = idStr.substring(0,idStr.length-1);
                console.info(idStr);
                /*var idStr = jo.getCheckBoxValue(joView.params["PKName"]);*/
                if(idStr!=""){
                    jo.post("travel/natureReserveSpatialinfo/export.action", {"ids":idStr});
                }else{
                    jo.showMsg("没有需要导出的数据!");
                }
            }
           //弹出增加空间位置信息框
           function showSpatialInfoWin(){
               //获取保护地id
               top.reserveId = joForm.params.id;
               //获取保护地ID
               top.spatialId = joForm.params.id;
               top.jo.showWin("page/nature/natureReserveSpatialinfoForm.jsp","40%","30%","功能分区信息");
		   }
        </script>
<style>
.item-checked {
	color: #EA2000;
}

.ul_img {
	list-style: none;
	padding: 0px 0px 5px 0px;
	margin: 0px;
}

.ul_img::after {
	content: '';
	display: block;
	clear: both;
}

.ul_img>li {
	float: left;
	width: 230px;
	height: 145px;
	margin: 5px 5px 0px 0px;
	border: #dddddd solid 1px;
	padding: 2px;
	overflow: hidden;
	position: relative;
}

.ul_img>li>img {
	width: 100%;
	cursor: pointer;
	/*max-height: 100%;*/
}

.img_oper {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	background: rgba(0, 0, 0, 0.6);
	height: 30px;
	line-height: 30px;
	text-align: center;
	color: #ffffff;
	font-weight: bolder;
	display: none;
}

.img_close {
	position: absolute;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	top: 2px;
	right: 2px;
	background: rgba(0, 0, 0, 0.6);
	color: #ffffff;
	font-weight: bolder;
	cursor: pointer;
}

.img_close:hover {
	font-size: 14px;
	opacity: 0.8;
}

.file {
	position: relative;
	display: inline-block;
	background: #D0EEFF;
	border: 1px solid #99D3F5;
	border-radius: 4px;
	padding: 4px 12px;
	overflow: hidden;
	color: #1E88C7;
	text-decoration: none;
	text-indent: 0;
	line-height: 20px;
}

.file input {
	position: absolute;
	font-size: 100px;
	right: 0;
	top: 0;
	opacity: 0;
}

.file:hover {
	background: #AADFFD;
	border-color: #78C3F3;
	color: #004974;
	text-decoration: none;
}

.a-upload {
	padding: 4px 10px;
	height: 20px;
	line-height: 20px;
	position: relative;
	cursor: pointer;
	color: #888;
	background: #fafafa;
	border: 1px solid #ddd;
	border-radius: 4px;
	overflow: hidden;
	display: inline-block;
	*display: inline;
	*zoom: 1
}

.a-upload  input {
	position: absolute;
	font-size: 100px;
	right: 0;
	top: 0;
	opacity: 0;
	filter: alpha(opacity = 0);
	cursor: pointer
}

.a-upload:hover {
	color: #444;
	background: #eee;
	border-color: #ccc;
	text-decoration: none
}
</style>
</head>
<body class="">
	<div class="container-fluid">
		<div class="row">
			<!-- 初始化地图页面 -->
			<div class="col-xs-12 col-lg-12 col-md-12 col-sm-12" id="map"
				style="height: 300px"></div>
			<!--地图tip popup-->
			<div id="popup123"
				style="width: auto; min-width: 200px; max-width: 1000px; white-space: nowrap; word-wrap: normal;"></div>
			<div id="popup" class="ol-popup" style="display: none">
				<a id="popup-closer" class="ol-popup-closer" style="cursor: pointer"></a>
				<div id="popup-content"></div>
			</div>
			<div class="col-xs-12 col-lg-12 col-md-12 col-sm-12"
				style="background-color: #e4eaec;">
				<%--按钮栏--%>
				<div class="form-group button-bar"
					style="padding: 0px 0px; margin: 7px 0px;">
					<%--<button type="button" isShow="joForm.formData.state==1"
						class="btn btn-sm btn-outline btn-primary" onclick="joForm.save()">
						<i class="fa fa-plus-circle" aria-hidden="true"></i>&nbsp;保存
					</button>--%>
					<button type="button" isShow="joForm.formData.state==undefined"
							class="btn btn-sm btn-outline btn-primary" onclick="joForm.save()">
						<i class="fa fa-plus-circle" aria-hidden="true"></i>&nbsp;上报
					</button>
					<button type="button" isShow="joForm.formData.state==2"
						class="btn btn-sm btn-outline btn-primary" onclick="update()">
						<i class="fa fa-pencil-square" aria-hidden="true"></i>&nbsp;修改
					</button>
					<button type="button" isShow="joForm.formData.state==3"
							class="btn btn-sm btn-outline btn-primary" onclick="saveAgain()">
						<i class="fa fa-pencil-square" aria-hidden="true"></i>&nbsp;再次上报
					</button>
					<%--<button type="button" isShow="!joForm.isAdd"
						class="btn btn-sm btn-outline btn-danger" onclick="joForm.del()">
						<i class="fa fa-trash" aria-hidden="true"></i>&nbsp;删除
					</button>--%>
				</div>
				<%--按钮栏--%>
			</div>
		</div>
		<div class="row" style="display:none" id="a_row">
			<div class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
				<div class="panel panel-primary">
					<div class="panel-heading">
						<h3 class="panel-title">
							审核信息
							<div class="flex-control fa fa-chevron-down"></div>
						</h3>
					</div>
					<div class="panel-body">
						<table class="table table-bordered  table-condensed dataTables-example dataTable no-footer">
						<tr>
							<td class="active" align="" >审批时间</td>
							<td class="tnt" style="text-align: left">
								<span id="a_checkTime" class="span_val1"></span>
							</td>
							<td class="active" align="">审批结果</td>
							<td class="tnt" align="" style="text-align: left">
								<span id="a_checkResult" style="color: #ee3f2f" class="span_val1"></span>
							</td>
						</tr>
						<tr>
							<td class="active" align="">审批意见</td>
							<td class="tnt" colspan="3" style="text-align: left">
								<span id="a_opinion" style="color: #ee3f2f" class="span_val1"></span>
							</td>
						</tr>
					</table>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
				<%--胶囊选项卡--%>
				<ul class="nav nav-tabs" style="margin-top: 5px;">
					<li class=""></li>
					<li class="active"><a class="cursor-hand" data-target="#base" data-toggle="pill">基 本 信 息</a></li>
					<li class=""><a class="cursor-hand" data-target="#sky" data-toggle="pill">功能分区信息</a></li>
					<li class=""><a class="cursor-hand" data-target="#youke" data-toggle="pill">产业与设施状况</a></li>
					<li id="li1" style="display: none"><a class="cursor-hand" data-target="#fujian" data-toggle="pill">规划/制度</a></li>
					<li id="li2" style="display: none"><a class="cursor-hand" data-target="#img" data-toggle="pill">照 片 信 息</a></li>
					<li id="li3" onclick="loadcyinfo()" style="display: none"><a class="cursor-hand" data-target="#info" data-toggle="pill">产业详情</a></li>
				</ul>

				<form id="pageForm" name="pageForm" action="" method="post" style="margin-top: 5px;">
					<div class="tab-content" style="margin-top: 5px;">
						<%--基本信息--%>
						<div class="tab-pane fade in active" id="base">
							<table
								class="table table-bordered  table-condensed dataTables-example dataTable no-footer">
								<tr>
									<input type="hidden" name="id" id="id" value="" />
									<td width="15%" class="active must" align="">保护地名称</td>
									<td class="tnt"><input type="text" name="name" id="reserveName"
										class="form-control input-sm" ErrEmpty /></td>
									<td width="15%" class="active must" align="">保护区类型</td>
									<td class="tnt"><select ErrEmpty name="categoryId"
										id="categoryId" class="joSelect form-control input-sm"
										firstItem='{"id":"","name":""}'
										dataurl="travel/reserveCategory/getList.action?stype=1"
										keyfield="id" valuefield="name"></select></td>
								</tr>
								<tr>
									<td class="active" align="">所属部门</td>
									<td class="tnt"><input type="text" name="pareantDept"
										class="form-control input-sm" /></td>
									<td width="15%" class="active" align="">保护地级别</td>
									<td class="tnt"><input type="text" name="natureGrade"
										class="form-control input-sm" /></td>
								</tr>
								<tr>
									<td class="active" align="">管理运营机构</td>
									<td class="tnt"><input type="text"
										name="manageOrganization" class="form-control input-sm" /></td>
									<td class="active" align="">地理位置</td>
									<td class="tnt"><input type="text" name="provinceCity"
										class="form-control input-sm" /></td>
								</tr>
								<tr>
									<td class="active" align="">成立时间</td>
									<td class="tnt"><input type="text" onclick="laydate()"
										name="buildDate" class="form-control input-sm" /></td>
									<td class="active" align="">保护区面积(k㎡)</td>
									<td class="tnt"><input type="text" name="area" id="area"
										class="form-control input-sm" /></td>
								</tr>

								<tr>
									<td class="active" align="">自然地理<br />与<br />人文社会情况
									</td>
									<td class="tnt" colspan="3"><textarea name="geoHuman"
											class="form-control input-sm" rows="4" placeholder=""></textarea>
									</td>
								</tr>
								<tr>
									<td class="active" align="">保护对象<br />(核心生态系统特征)
									</td>
									<td class="tnt" colspan="3"><textarea name="proAnimal"
											class="form-control input-sm" rows="4" placeholder=""></textarea>
									</td>
								</tr>
								<tr>
									<td class="active" align="">土地利用状况</td>
									<td class="tnt" colspan="3"><textarea name="landUse"
											class="form-control input-sm" rows="4" placeholder=""></textarea>
									</td>
								</tr>
								<tr>
									<td class="active" align="">生物多样性情况</td>
									<td class="tnt" colspan="3"><textarea name="bioDiversity"
											class="form-control input-sm" rows="4" placeholder=""></textarea>
									</td>
								</tr>
								<tr>
									<td class="active" align="">资源状况与价值</td>
									<td class="tnt" colspan="3"><textarea name="resourceState"
											class="form-control input-sm" rows="4" placeholder=""></textarea>
									</td>
								</tr>
								<tr>
									<td class="active" align="">交通信息</td>
									<td class="tnt" colspan="3"><textarea name="traficInfo"
											class="form-control input-sm" rows="4" placeholder=""></textarea>
									</td>
								</tr>
								<tr>
									<td class="active" align="">保护现状</td>
									<td class="tnt" colspan="3"><textarea name="proState"
											class="form-control input-sm" rows="4" placeholder=""></textarea>
									</td>
								</tr>
							</table>
						</div>
						<!-- 空间信息 -->
						<div class="tab-pane fade in" id="sky">
							<!--按钮栏-->
							<div class="form-group button-bar" style="padding: 0px 0px; margin: 7px 0px;">
								<button type="button" class="btn btn-sm btn-outline btn-primary" onclick="showSpatialInfoWin();" isShow="joForm.formData.state==undefined || joForm.formData.state==3 || joForm.formData.state==2">
									<i class="fa fa-pencil-square" aria-hidden="true"></i>&nbsp;添加功能分区坐标
								</button>
								<button type="button" class="btn btn-sm btn-outline btn-primary" onclick="importExcel();" isShow="joForm.formData.state==undefined || joForm.formData.state==3 || joForm.formData.state==2">
									<i class="fa fa-pencil-square" aria-hidden="true"></i>&nbsp;导入
								</button>
								<button type="button" class="btn btn-sm btn-outline btn-primary" onclick="exportExcel();">
									<i class="fa fa-pencil-square" aria-hidden="true"></i>&nbsp;导出
								</button>
							</div>
							<table id="" class="table table-bordered  table-condensed dataTables-example dataTable no-footer">
								<tr>
									<td width="15%" class="active" align="">自然保护地坐标</td>
									<td class="tnt" colspan="3"><input type="text"
										name="position" id="natureCoordinate" class="form-control input-sm"
										placeholder="暂无该分区" /></td>
								</tr>
							</table>
							<table id="positionTal" class="table table-bordered  table-condensed dataTables-example dataTable no-footer">
								<!-- 功能分区 -->

							</table>
						</div>
						<%--产业与设施状况--%>
						<div class="tab-pane fade in" id="youke">
							<table class="table table-bordered  table-condensed dataTables-example dataTable no-footer">
								<%--<tr>
									<td id="cyinfo" class="tnt" colspan="4" style="display: none">
										<button type="button" isShow="joForm.formData.state==2" class="btn btn-sm btn-outline btn-success" onclick="loadcyinfo()">
											<i class="fa fa-plus-circle" aria-hidden="true"></i>&nbsp;点击查看产业详情
										</button>
									</td>
								</tr>--%>
								<tr>
									<td width="15%" class="active" align="">特色产品</td>
									<td class="tnt" colspan="3"><input type="text" name="specity" class="form-control input-sm" /></td>
								</tr>
								<tr>
									<td width="15%" class="active" align="">传统产业情况</td>
									<td class="tnt" colspan="3"><input type="text" name="traditionState" class="form-control input-sm" /></td>
								</tr>
								<tr>
									<td class="active" align="">基础设施</td>
									<td class="tnt" colspan="3"><textarea name="basicBuild"
											class="form-control input-sm" rows="4" placeholder=""></textarea>
									</td>
								</tr>
								<tr>
									<td class="active" align="">服务设施</td>
									<td class="tnt" colspan="3"><textarea name="serverBuild"
											class="form-control input-sm" rows="4" placeholder=""></textarea>
									</td>
								</tr>
								<tr>
									<td class="active" align="">出行指南</td>
									<td class="tnt" colspan="3"><textarea name="travleGuide"
											class="form-control input-sm" rows="4" placeholder=""></textarea>
									</td>
								</tr>
								<tr>
									<td class="active" align="">社区人口与社会经济状况</td>
									<td class="tnt" colspan="3"><textarea name="humanEconomic"
											class="form-control input-sm" rows="4" placeholder=""></textarea>
									</td>
								</tr>
								<tr>
									<td class="active" align="">社区参与状况</td>
									<td class="tnt" colspan="3"><textarea
											name="patticipateState" class="form-control input-sm"
											rows="4" placeholder=""></textarea></td>
								</tr>

								<tr>
									<td class="active" align="">直接或间接就业人数</td>
									<td class="tnt" colspan="3"><textarea name="jobState"
											class="form-control input-sm" rows="4" placeholder=""></textarea>
									</td>
								</tr>
								<tr>
									<td width="15%" class="active" align="">科研项目</td>
									<td class="tnt" colspan="3"><textarea
											name="researchProject" class="form-control input-sm" rows="4"
											placeholder=""></textarea></td>
								</tr>
							</table>
						</div>
						<!-- 附件信息 -->
						<div class="tab-pane fade in" id="fujian">
							<table
								class="table table-bordered  table-condensed dataTables-example dataTable no-footer">

								<tr>
									<td class="active" align="">计划规划<br />(<a
										class="cursor-hand" onclick="uploadNatureFile('plan')">上传</a>)
									</td>
									<td class="tnt" colspan="3" id="plan">
									</td>
								</tr>
								<tr>
									<td class="active" align="">管理制度<br />(<a
										class="cursor-hand" onclick="uploadNatureFile('system')">上传</a>)
									</td>
									<td class="tnt" colspan="3" id="system">
									</td>
								</tr>
							</table>
						</div>
						<%--照片信息--%>
						<div class="tab-pane fade in" id="img">
							<button type="button" isShow="!joForm.isAdd"
								class="btn btn-sm btn-outline btn-primary" onclick="upload()">
								<i class="fa fa-upload" aria-hidden="true"></i>&nbsp;上传照片
							</button>
							<ul class="ul_img" id="ul_img">
							</ul>
						</div>
						<%--产业详情--%>
						<div class="tab-pane fade in" id="info">
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<script>
        //获取保护区坐标
        var coordinateStr = top.coordinateStr;
        if(coordinateStr){
            $("#natureCoordinate").val(coordinateStr);
        }
        //获取保护区的id
        var id = top.fId;
        if(!id){
            id = "";
        }
        if(joForm.isAdd){
            $("#id").val(id);
        }

        //定义表单中功能分区位置table的id用于传入子表单中
        top.positionTable = $("#positionTal");
	</script>
	<script
		src="<%=URL_STATIC%>static/plugin/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<script type="text/javascript">
    jo.formatUI();//格式化jo组件
</script>
</body>
</html>
